<template>
    <div>
        <el-container>
            <el-header>
                <h3>旅梦后台管理</h3>
                <span>welcome {{ user }}</span>
            </el-header>
            <el-container class="content">
                <el-aside width="200px">
                    <el-menu router unique-opened active-text-color="#ffd04b" background-color="#545c64"
                        class="el-menu-vertical-demo" default-active="aima" text-color="#fff">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>班级情况</span>
                            </template>
                            <el-menu-item index="/aima">爱码班</el-menu-item>
                            <el-menu-item index="/lomgma">龙码班</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <DocumentChecked />
                                </el-icon>
                                <span>就业情况</span>
                            </template>
                            <el-menu-item index="2-1">top20</el-menu-item>
                            <el-menu-item index="2-2">top50</el-menu-item>
                            <el-menu-item index="2-3">top100</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
const user = localStorage.getItem("username");
</script>

<style lang="css" scoped>
.el-header {
    background-color: #c6e2ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content {
    height: calc(100vh - 60px)
}

.el-menu {
    height: 100%;
}
</style>